<template>
  <div v-if="visible" class="prop-editor">
    <div class="prop-editor-header">
      <h3>属性编辑</h3>
      <button class="close-btn" @click="close">×</button>
    </div>
    
    <div class="prop-editor-body" v-if="currentGraph">
      <div class="prop-section">
        <h4>基本属性</h4>
        
        <!-- 颜色选择器 -->
        <div class="prop-item">
          <label>颜色</label>
          <input 
            type="color" 
            v-model="graphProps.color" 
            @change="updateGraphProp('color', graphProps.color)"
          />
        </div>
        
        <!-- 线宽设置 -->
        <div class="prop-item" v-if="isLineType">
          <label>线宽</label>
          <input 
            type="range" 
            min="1" 
            max="10" 
            v-model.number="graphProps.width" 
            @change="updateGraphProp('width', graphProps.width)"
          />
          <span class="prop-value">{{ graphProps.width }}px</span>
        </div>
        
        <!-- 透明度设置 -->
        <div class="prop-item">
          <label>透明度</label>
          <input 
            type="range" 
            min="0" 
            max="1" 
            step="0.1" 
            v-model.number="graphProps.opacity" 
            @change="updateGraphProp('opacity', graphProps.opacity)"
          />
          <span class="prop-value">{{ Math.round(graphProps.opacity * 100) }}%</span>
        </div>
        
        <!-- 图形ID -->
        <div class="prop-item">
          <label>ID</label>
          <span class="prop-value">{{ currentGraph.id || '未定义' }}</span>
        </div>
        
        <!-- 图形类型 -->
        <div class="prop-item">
          <label>类型</label>
          <span class="prop-value">{{ graphProps.type || '未定义' }}</span>
        </div>
      </div>
      
      <!-- 自定义属性区域 -->
      <div class="prop-section" v-if="hasCustomProps">
        <h4>自定义属性</h4>
        <!-- 名称输入 -->
        <div class="prop-item" v-if="customProps.name !== undefined">
          <label>名称</label>
          <input 
            type="text" 
            v-model="customProps.name" 
            @change="updateCustomProp('name', customProps.name)"
            style="flex: 1; padding: 4px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 4px; color: white; font-size: 11px;"
          />
        </div>
        
        <!-- 描述输入 -->
        <div class="prop-item" v-if="customProps.description !== undefined">
          <label>描述</label>
          <input 
            type="text" 
            v-model="customProps.description" 
            @change="updateCustomProp('description', customProps.description)"
            style="flex: 1; padding: 4px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 4px; color: white; font-size: 11px;"
          />
        </div>
        
        <!-- 填充复选框 -->
        <div class="style-control" v-if="customProps.fill !== undefined">
          <label>填充</label>
          <el-switch 
            v-model="customProps.fill" 
            @change="updateCustomProp('fill', customProps.fill)"
            size="small"
            style="--el-switch-on-color: #13ce66;"
          />
        </div>
        
        <!-- 轮廓复选框 -->
        <div class="style-control" v-if="customProps.outline !== undefined">
          <label>轮廓</label>
          <el-switch 
            v-model="customProps.outline" 
            @change="updateCustomProp('outline', customProps.outline)"
            size="small"
            style="--el-switch-on-color: #13ce66;"
          />
        </div>
        
        <!-- 轮廓颜色选择器 -->
        <div class="style-control" v-if="customProps.outlineColor !== undefined">
          <label>轮廓颜色</label>
          <input 
            type="color" 
            v-model="customProps.outlineColor" 
            @change="updateCustomProp('outlineColor', customProps.outlineColor)"
            style="width: 30px; height: 24px; border: none; border-radius: 4px; cursor: pointer; background: transparent;"
          />
        </div>
        
        <!-- 轮廓宽度设置 -->
        <div class="style-control" v-if="customProps.outlineWidth !== undefined" style="justify-content: space-between;">
          <label>轮廓宽度</label>
          <div style="display: flex; align-items: center; gap: 6px; flex: 1;">
            <input 
              type="range" 
              min="1" 
              max="10" 
              v-model.number="customProps.outlineWidth" 
              @change="updateCustomProp('outlineWidth', customProps.outlineWidth)"
              style="flex: 1; height: 2px; background: rgba(255, 255, 255, 0.2); border-radius: 1px; outline: none; appearance: none;"
            />
            <span style="font-size: 11px; color: rgba(255, 255, 255, 0.9); min-width: 40px; text-align: right;">{{ customProps.outlineWidth }}px</span>
          </div>
        </div>
        
        <!-- 其他自定义属性仍然以只读方式显示 -->
        <div class="prop-item" v-for="(value, key) in getReadOnlyCustomProps()" :key="key">
          <label>{{ key }}</label>
          <span class="prop-value">{{ value }}</span>
        </div>
      </div>
      <el-button type="danger" @click="deleteCurrentGraph">删除</el-button>
    </div>
    
    <div class="prop-editor-empty" v-else>
      未选中任何图形
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'

const props = defineProps({
  plotManager: {
    type: [Object, null],
    required: false,
    default: null
  }
})

// 组件内部状态
const visible = ref(false)
const currentGraph = ref(null)
const graphProps = ref({
  color: '#00FF00',
  width: 2,
  opacity: 0.8
})

// 计算属性
const isLineType = computed(() => {
  if (!currentGraph.value) return false
  const lineTypes = ['Polyline', 'Bezier1', 'Bezier2', 'BezierSpline', 'CircleArc', 'BeeLine']
  return lineTypes.includes(currentGraph.value.type)
})

const customProps = ref({})

// 监听当前图形变化，更新自定义属性
watch(currentGraph, (newGraph) => {
  if (newGraph && newGraph.props) {
    const excludedProps = ['color', 'width', 'opacity', 'id', 'type']
    const result = {}
    
    // 提取不包含在排除列表中的属性
    for (const [key, value] of Object.entries(newGraph.props)) {
      if (!excludedProps.includes(key)) {
        result[key] = value
      }
    }
    
    customProps.value = result
  } else {
    customProps.value = {}
  }
}, { immediate: true })

// 获取非特定的只读自定义属性
const getReadOnlyCustomProps = () => {
  const editableProps = ['name', 'description', 'fill', 'outline', 'outlineColor', 'outlineWidth']
  const result = {}
  
  for (const [key, value] of Object.entries(customProps.value)) {
    if (!editableProps.includes(key)) {
      result[key] = value
    }
  }
  
  return result
}

const hasCustomProps = computed(() => {
  return Object.keys(customProps.value).length > 0
})

// 更新自定义属性
const updateCustomProp = (propName, value) => {
  if (currentGraph.value) {
    try {
      // 创建新的属性对象
      const newProps = {
        ...currentGraph.value.props,
        [propName]: value
      }
      
      // 更新图形属性
      if (typeof currentGraph.value) {
        currentGraph.value.props={};
        setTimeout(() => {
          currentGraph.value.props={...newProps}
        }, 10);
      } else {
        console.warn('图形对象没有setProps方法')
      }
    } catch (error) {
      console.error('更新自定义属性失败:', error)
    }
  }
}

// 监听当前图形变化，更新属性
watch(currentGraph, (newGraph) => {
  if (newGraph) {
    // 初始化图形属性
    graphProps.value = {
      color: newGraph.props?.color || '#00FF00',
      width: newGraph.props?.width || 2,
      opacity: newGraph.props?.opacity || 0.8
    }
  }
})

// 更新图形属性
const updateGraphProp = (propName, value) => {
  if (currentGraph.value) {
    try {
      // 创建新的属性对象
      const newProps = {
        ...currentGraph.value.props,
        [propName]: value
      }
      
      // 更新图形属性
      if (typeof currentGraph.value) {
        currentGraph.value.props={};
        setTimeout(() => {
          currentGraph.value.props={...newProps}
        }, 30);
      } else {
        console.warn('图形对象没有setProps方法')
      }
    } catch (error) {
      console.error('更新图形属性失败:', error)
    }
  }
}

// 显示属性编辑器
const show = (isVisible, graph) => {
  visible.value = isVisible
  currentGraph.value = graph
}

// 关闭属性编辑器
const close = () => {
  visible.value = false
  currentGraph.value = null
}

// 删除当前图形
const deleteCurrentGraph = () => {
  if (currentGraph.value && props.plotManager) {
    props.plotManager.delete(currentGraph.value)
    close()
  }
}

// 暴露方法给父组件
defineExpose({
  show,
  close
})
</script>

<style scoped>
.prop-editor {
  position: fixed;
  top: 50px;
  right: 20px;
  background: rgba(15, 23, 42, 0.65);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
}

.prop-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.prop-editor-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: white;
}

.close-btn {
  width: 20px;
  height: 20px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.prop-editor-body {
  padding: 16px;
  max-height: 400px;
  overflow-y: auto;
}

.prop-editor-empty {
  padding: 24px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
}

.prop-section {
  margin-bottom: 20px;
}

.prop-section:last-child {
  margin-bottom: 0;
}

.prop-section h4 {
  margin: 0 0 12px 0;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.7);
}

.prop-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
  }
  
  /* 样式控制组件 - 与标绘组件中的属性编辑保持一致 */
  .style-control {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
  }
  
  .style-control label {
    width: 60px;
  }

.prop-item:last-child {
  margin-bottom: 0;
}

.prop-item label {
  width: 60px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
}

.prop-item input[type="color"] {
  width: 40px;
  height: 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background: transparent;
  /* flex: 1; */
  margin-left: calc(100% - 90px);
}

.prop-item input[type="range"] {
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 1px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.prop-item input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: #00FF00;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.prop-item input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: #00FF00;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.prop-value {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.9);
  min-width: 40px;
  text-align: right;
  flex: 1;
}

/* 滚动条样式 */
.prop-editor-body::-webkit-scrollbar {
  width: 6px;
}

.prop-editor-body::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.prop-editor-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.prop-editor-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}
</style>